<!--
* @author wn
* @date 2022/07/14 10:38:29
* @description: this.$message({})  方便的使用  该组件
*
* 无需组件 的注册 与 结构渲染
* 使用的地方 直接调用 函数  即可触发组件
!-->
<template>
	<transition name="down">
		<div class="xtx-message" :style="style[type]" v-show="visible">
			<i class="iconfont" :class="style[type].icon"></i>
			<span>{{ message }}</span>
		</div>
	</transition>
</template>
<script>
import { ref, onMounted } from 'vue'
export default {
	name: 'XtxMessage',
	props: {
		type: {
			type: String,
			default: 'success',
		},
		message: {
			type: String,
			default: '',
		},
	},
	setup() {
		// 定义一个对象，包含三种情况的样式，对象key就是类型字符串
		const style = {
			warn: {
				icon: 'icon-warning',
				color: '#E6A23C',
				backgroundColor: 'rgb(253, 246, 236)',
				borderColor: 'rgb(250, 236, 216)',
			},
			error: {
				icon: 'icon-shanchu',
				color: '#F56C6C',
				backgroundColor: 'rgb(254, 240, 240)',
				borderColor: 'rgb(253, 226, 226)',
			},
			success: {
				icon: 'icon-queren2',
				color: '#67C23A',
				backgroundColor: 'rgb(240, 249, 235)',
				borderColor: 'rgb(225, 243, 216)',
			},
		}
		const visible = ref(false)
		onMounted(() => {
			visible.value = true
		})

		return { style, visible }
	},
}
</script>
<style scoped lang="less">
// 组件样式
.xtx-message {
	position: fixed;
	top: 25px;
	left: 50%;
	// transform: translateX(-50%);
	margin-left: -150px;
	z-index: 999;
	width: 300px;
	height: 50px;
	line-height: 50px;
	padding: 0 25px;
	border: 1px solid #e4e4e4;
	// background: #f5f5f5;
	// color: #999;
	border-radius: 4px;
	i {
		margin-right: 4px;
		vertical-align: middle;
	}
	span {
		vertical-align: middle;
	}
}
// 动画样式
.down {
	&-enter {
		&-from {
			transform: translateY(-75px);
			opacity: 0;
		}
		&-active {
			transition: all 0.5s;
		}
		&-to {
			transform: translateY(0);
			opacity: 1;
		}
	}
}
</style>
